<template>
	<view class="minePage-wrapper">
		<view class="fixed-box colCen" style="background:linear-gradient(263deg, #FF1F4B, #FE3937);">
			<view class="topbarbox"></view>
			<view class="navigate-container rowCenBet">
				<view class="setting-box" style="opacity: 0;">
					&#xe74b;
				</view>
				<view class="pagetitle" v-if="sct>0.5">
					个人中心
				</view>
				<view class="setting-box iconfont" @tap="goPage('./setting/setting')">
					&#xe74b;
				</view>
			</view>
		</view>
		<view class="headerbox-container colCen">
			<view class="topbarbox"></view>
			<view class="headerbox-container rowCenEnd borderBox">
			</view>
			<view class="userInfo-content rowStaBet borderBox">
				<view class="leftuserInfo rowCen">
					<view class="head-content defIcon">
						<image :src="userInfo.avatar" mode="aspectFill"></image>
						<!-- <view class="vipcard rowCenCen">
							<view>{{userInfo.levelName}}</view> 
						</view> -->
					</view>
					<view class="userName-inviteCode-container">
						<view class="userNamebox">
							{{userInfo.nickName}}
						</view>
						<!-- <view class="under-container rowCen">
							<view class="inviteCodebox rowCen" @tap='setcode()'>
								{{userInfo.inviteCode?'邀请码:' + userInfo.inviteCode:'点击填写邀请码'}}
							</view>
							<view class="clipbtn" @tap="clipCode()" v-if="userInfo.inviteCode">
								<view>复制</view>
							</view>
						</view> -->
					</view>
				</view>
				<view class="inviteBtn borderBox rowCenCen" @tap="goPage('./inviteFriends')" v-if="!showtar">
					<view class="iconfont">
						&#xe67e; 邀请好友
					</view>
				</view>
			</view>

			<!-- <view class="profit-container rowCen" v-if="!showtar ">
				<view class="profit-items colCen">
					<view class="price-num">
						{{profit.toDayMoney}}
					</view>
					<view class="profit-txt">
						今日预估
					</view>
				</view>
				<view class="profit-items colCen">
					<view class="price-num">
						{{profit.yesterDayMoney}}
					</view>
					<view class="profit-txt">
						昨日预估
					</view>
				</view>
				<view class="profit-items colCen">
					<view class="price-num">
						{{profit.monthMoney}}
					</view>
					<view class="profit-txt">
						本月预估
					</view>
				</view>
				<view class="profit-items colCen">
					<view class="price-num">
						{{profit.lastMonth}}
					</view>
					<view class="profit-txt">
						上月预估
					</view>
				</view>
			</view> -->

			<!-- <view class="account-assets-container rowCenCen borderBox" v-if="!showtar ">
				<view class="cardBac-container rowStaBet borderBox">
					<view class="left-content">
						<view class="balance">
							账户余额：{{userInfo.nowMoney}}
						</view>
						<view class="notice-bar rowCen">
							<view class="iconfont">
								&#xe64c;
							</view>
							<view class="noticeTxt">
								每月25号结算上月月底前已确认收货的佣金哦~
							</view>
						</view>
					</view>
					<view class="right-content colCen">
						<view class="cashOut-btn colCenCen" @tap="goPage('./cashOut')">
							<view>去提现</view>
						</view>
						<view class="accumulations rowCen" @tap="goPage('./myProfit')">
							<view class="txt">
								累积收益
							</view>
							<view class="arrow iconfont">
								&#xe8d4;
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="mine-under-container colCen borderBox">
		<!-- 	<view class="nav-container rowCenBet borderBox" v-if="!showtar ">
				<view class="nav-items colCen" v-for="(items,index) in dingdanList" :key="index">
					<view class="itemsicon defIcon" @tap="gojgqUrl(items)">
						<image :src="items.mpic" mode="aspectFill"></image>
					</view>
					<view class="itemstxt">
						{{items.mname}}
					</view>
				</view>
			</view> -->

			
			
			<view class="commonFunctions-container" v-if="cygnList.length>0">
				<view class="card-title">
					常用功能
				</view>
				<view class="function-list rowCen">
					<block v-for="(items,index) in cygnList" :key="index">
						<view class="function-items colCen" @tap="gojgqUrl(items)">
							<view class="iconbox defIcon">
								<image :src="items.mpic" mode="aspectFill"></image>
							</view>
							<view class="itemName">
								{{items.mname}}
							</view>
						</view>
					</block>
				</view>
			</view>

			<!-- <view class="matter-tranform-container rowCenCen" v-if="wuLiaoList.length>0">
				<view class="pushing-matter rowCen" @tap="gojgqUrl(wuLiaoList[0])">
					<view class="leftIteminfo">
						<view class="itemName">
							{{wuLiaoList[0].mname}}
						</view>
						<view class="itemexplain">
							{{wuLiaoList[0].tips}}
						</view>
					</view>
					<view class="iconbox defIcon" style="width:44rpx; height: 46rpx;margin-left: 60rpx;">
						<image :src="wuLiaoList[0].mpic" mode="aspectFill"></image>
					</view>
				</view>
				<view class="centerBorder"></view>
				<view class="pushing-matter rowCen" @tap="gojgqUrl(wuLiaoList[1])">
					<view class="leftIteminfo">
						<view class="itemName">
							{{wuLiaoList[1].mname}}
						</view>
						<view class="itemexplain">
							{{wuLiaoList[1].tips}}
						</view>
					</view>
					<view class="iconbox defIcon" style="width:44rpx; height: 46rpx;margin-left: 60rpx;">
						<image :src="wuLiaoList[1].mpic" mode="aspectFill"></image>
					</view>
				</view>
			</view> -->
			
			
			<view class="swiper-container borderBox" v-if="bannerList.length>0">
				<swiper class="banerContent" :autoplay="true" :interval="3000" :duration="1000" circular>
					<swiper-item v-for="(items,index) in bannerList" :key="index" @tap="goUrl(items)">
						<view class="swiper-items defIcon">
							<image :src="items.pic" mode="aspectFit"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			


			<view class="commonFunctions-container" v-if="xstgList.length>0">
				<view class="card-title">
					限时推广
				</view>
				<view class="function-list rowCen">
					<block v-for="(items,index) in xstgList">
						<view class="function-items colCen"  @tap="gojgqUrl(items)">
							<view class="iconbox defIcon">
								<image :src="items.mpic" mode="aspectFill"></image>
							</view>
							<view class="itemName">
								{{items.mname}}
							</view>
						</view>
					</block>
				</view>
			</view>

			<view class="commonFunctions-container" v-if="gongJuList.length>0">
				<view class="card-title">
					实用功能
				</view>
				<view class="function-list rowCen">
					<block v-for="(items,index) in gongJuList">
						<view class="function-items colCen" @tap="gojgqUrl(items)">
							<view class="iconbox defIcon">
								<image :src="items.mpic" mode="aspectFill"></image>
							</view>
							<view class="itemName">
								{{items.mname}}
							</view>
						</view>
					</block>
				</view>
			</view>
			
			<u-toast ref="uToast" />
			
			<u-popup v-model="inviteCodeShow" mode="center" border-radius="32" :mask-close-able='true'>
				<inviteCodeModel @closeModel='closeinvite' @confirm='nextStep'></inviteCodeModel>
			</u-popup>
			
			<u-popup v-model="inviterShow" mode="center" border-radius="32" v-if="inviterShow" :mask-close-able='true'>
				<inviter-model ref='invitermodel' @rewrite='rewriteCode' @setInvite='setCodebtn'></inviter-model>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import util from '../../utils/utils.js'
	import APPUpdate from "../../utils/appUpdate.js";
	import {mapMutations} from 'vuex';
	/* import inviteCodeModel from '../../components/inviteCode.vue'
	import inviterModel from '../../components/inviterModel.vue' */
	export default {
	/* 	components: {
			inviteCodeModel,
			inviterModel
		}, */
		data() {
			return {
				scrollTop: 0,
				userInfo: '',
				appInfo: '',
				dingdanList: '',
				wuLiaoList: '',
				bannerList: '',
				cygnList: '',
				xstgList: '',
				gongJuList: '',
				profit: '',
				platform: '',
				showtar: false,

				sct: 0,
				inviteCodeShow:false,
				inviterShow:false,
				loadstatus: 'loading'
			}
		},
		onPageScroll(e) {
			if (e.scrollTop < 50) {
				this.sct = e.scrollTop / 20
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.appInfo = uni.getStorageSync('appInfo');
			//this.showtar = getApp().globalData.appinfo.iosExamine ? true : (getApp().globalData.ifwt == 0 ? false : true)
			this.platform = plus.os.name
			// #endif
			this.centerInfo()
			this.getbanner()
			
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onShow() {
			this.getuserInfo()
		},
		methods: {
			...mapMutations({
				"SET_USER_INFO":'user/SET_USER_INFO'
			}),
			getuserInfo() {
				this.$http.get('member/getInfo', {}, true).then((res) => {
					console.log("用户信息"+JSON.stringify(res))
					this.userInfo = res
					this.SET_USER_INFO(res)
					util.setCache('userData', res)
				})
			},

			getbanner() {
				this.$http.get('banner/list/2').then((res) => {
					this.bannerList = res;
				})
			},

			centerInfo() {
				this.$http.post('homeMenu/getPersonalCenter').then(res => {
					this.dingdanList = res.dingdanList
					this.wuLiaoList = res.wuLiaoList
					this.wuLiaoList = res.wuLiaoList
					this.cygnList = res.cygnList
					this.xstgList = res.xstgList
					this.gongJuList = res.gongJuList
				})
			},

			clipCode() {
				uni.setClipboardData({
					data: this.userInfo.inviteCode,
					success: () => {
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: "none"
						})
						uni.setStorageSync('clipboard', this.userInfo.inviteCode);
					}
				})
			},

			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},

			goUrl(info) {
				console.log(info);
				util.goUrl(info)
			},

			gojgqUrl(info) {
				if (info.urlType == 9999) {
					if (info.murl == 'share') {
						this.shareApp()
					} else if (info.murl == 'version_update') {
						// #ifdef APP-PLUS
						this.$http.get("appversion/getInfo", {
							equipmentType: (uni.getSystemInfoSync().platform == "android") ? 1 : 2
						}).then(res => {
							if (res.versionNumber) {
								if (this.cpr_version(res.versionNumber, plus.runtime.version)) {
									APPUpdate()
								} else {
									this.$refs.uToast.show({
										title: '当前已是最新版本~',
										type: 'default',
										position: 'bottom'
									})
								}
							}
						});
						// #endif 
					}
				}else{
					util.goUrl(info)
				}
			},
			
			cpr_version(a, b) {
				var _a = this.toNum(a),
					_b = this.toNum(b);
				if (_a == _b) return false
				if (_a < _b) return false
				if (_a > _b) return true
			},
			
			toNum(a) {
				var a = a.toString();
				//也可以这样写 var c=a.split(/\./);
				var c = a.split('.');
				var num_place = ["", "0", "00", "000", "0000"],
					r = num_place.reverse();
				for (var i = 0; i < c.length; i++) {
					var len = c[i].length;
					c[i] = r[len] + c[i];
				}
				var res = c.join('');
				return res;
			},
			
			shareApp() {
				// #ifdef APP-PLUS
				var txtdata
				if (plus.os.name == 'Android') {
					txtdata = getApp().globalData.appinfo.appName + '的下载链接为：' + getApp().globalData.appinfo.appAndroidDownUrl
				} else {
					txtdata = getApp().globalData.appinfo.appName + '的下载链接为：' + getApp().globalData.appinfo.appIosDownUrl
				}
				uni.setClipboardData({
					data: txtdata,
					success: res => {
						uni.showToast({
							title: '下载链接已复制~快去分享给好友吧！',
							icon: 'none'
						})
						uni.setStorageSync('clipboard', txtdata);
					}
				});
				// #endif
			},

			setcode() {
				if (!this.userInfo.inviteCode && this.userInfo) {
					this.inviteCodeShow = true
				}
			},
			closeinvite(){
				this.inviteCodeShow = false
			},
			nextStep(e){
				uni.setStorageSync('inviterInfo',e)
				this.inviteCodeShow = false
				this.inviterShow = true
			},
			rewriteCode(){
				this.inviteCodeShow = true
				this.inviterShow = false
			},
			setCodebtn(){
				this.inviteCodeShow = false
				this.inviterShow = false
				this.getuserInfo()
			},
			onPullDownRefresh() {
				this.loadstatus = 'loading';
				this.centerInfo()
				this.getbanner()
				uni.stopPullDownRefresh();
			}
		}
	}
</script>

<style lang="scss">
	.minePage-wrapper {
		width: 100%;

		.fixed-box {
			position: fixed;
			width: 100%;
			z-index: 1000;

			.navigate-container {
				width: 100%;
				height: 90rpx;
				padding: 0 30rpx;

				.setting-box {
					font-size: 34rpx;
					color: #FFFFFF;
				}

				.pagetitle {
					font-size: 32rpx;
					color: #FFFFFF;
					font-weight: 500;
				}
			}
		}

		.headerbox-container { 
			width: 100%;
			height: 390rpx;
			position: relative;
			background: linear-gradient(263deg, #FF1F4B, #FE3937);

// background: linear-gradient(263deg, #FF1F4B, #FE3937);
			.headerbox-container {
				width: 100%;
				height: 90rpx;
				padding: 0 32rpx;
			}

			.userInfo-content {
				width: 100%;

				.leftuserInfo {
					margin-left: 30rpx;

					.head-content {
						width: 115rpx;
						height: 115rpx;
						position: relative;

						.vipcard {
							position: absolute;
							width: 100%;
							height: 36rpx;
							border-radius: 18rpx;
							background: linear-gradient(0deg, #F7C394, #EFE0D6);
							font-size: 22rpx;
							font-weight: 500;
							color: #613309;
							bottom: -15rpx;
						}

						image {
							border-radius: 50%;
						}
					}

					.userName-inviteCode-container {
						margin-left: 25rpx;

						.userNamebox {
							font-size: 34rpx;
							font-weight: bold;
							color: #FFFFFF;
						}

						.under-container {
							margin-top: 20rpx;

							.inviteCodebox {
								height: 36rpx;
								font-size: 28rpx;
								font-weight: 400;
								color: #FFFFFF;
								padding: 0 18rpx;
								background: #BE52FA;
								border-radius: 18rpx;
							}

							.clipbtn {
								width: 80rpx;
								height: 36rpx;
								background: #FFFFFF;
								border-radius: 18rpx;
								text-align: center;
								font-size: 24rpx;
								font-weight: 400;
								color: #ED00F8;
								margin-left: 20rpx;
							}
						}
					}
				}

				.inviteBtn {
					width: 176rpx; 
					height: 44rpx;
					background: #E1173F;
					border-radius: 22rpx 0px 0px 22rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					margin-top: 30rpx;
				}
			}

			.profit-container {
				width: 100%;
				margin-top: 70rpx;

				.profit-items {
					width: 25%;
					color: #FFFFFF;

					.price-num {
						font-size: 28rpx;
						font-weight: bold;
					}

					.price-txt {
						font-size: 24rpx;
						font-weight: 500;
					}
				}
			}

			.account-assets-container {
				width: 100%;
				padding: 0 30rpx;
				position: absolute;
				bottom: -65rpx;

				.cardBac-container {
					width: 100%;
					height: 126rpx;
					background: linear-gradient(4deg, #FEEEE1, #FBE0CF);
					border-radius: 16rpx;
					padding: 0 20rpx;

					.left-content {
						margin-top: 25rpx;

						.balance {
							font-size: 28rpx;
							font-weight: 500;
							color: #613309;
						}

						.notice-bar {
							margin-top: 10rpx;

							.iconfont {
								font-size: 28rpx;
								font-weight: 500;
								color: #613309;
							}

							.noticeTxt {
								max-width: 505rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								font-size: 24rpx;
								font-weight: 500;
								color: #613309;
								margin-left: 20rpx;
							}
						}
					}

					.right-content {
						margin-top: 18rpx;

						.cashOut-btn {
							width: 120rpx;
							height: 50rpx;
							background: #2F385B;
							border-radius: 25rpx;
							font-size: 26rpx;
							font-weight: 500;
							color: #FFFFFF;
						}

						.accumulations {
							font-size: 22rpx;
							font-weight: 500;
							color: #613309;
							margin-top: 20rpx;
							line-height: 20rpx;

							.arrow {
								font-size: 18rpx;
								line-height: 20rpx;
								margin-top: 5rpx;
							}
						}
					}
				}
			}
		}

		.mine-under-container {
			width: 100%;
			margin-top: 35rpx;
			padding: 0 30rpx;

			.nav-container {
				width: 100%;
				height: 142rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 26rpx;
				margin-bottom: 20rpx;

				.nav-items {
					.itemsicon {
						width: 60rpx;
						height: 60rpx;
					}

					.itemstxt {
						font-size: 24rpx;
						font-weight: 500;
						color: #333333;
						margin-top: 15rpx;
					}
				}
			}

			.swiper-container {
				width: 100%;
				margin-bottom: 20rpx;

				.banerContent {
					width: 100%;
					height: 180rpx;

					.swiper-items {
						width: 100%;
						height: 100%;
					}
				}
			}

			.matter-tranform-container {
				width: 100%;
				height: 140rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 20rpx;

				.pushing-matter {
					.leftIteminfo {
						color: #333333;

						.itemName {
							font-size: 30rpx;
							font-weight: bold;
						}

						.itemexplain {
							font-size: 24rpx;
							font-weight: 500;
						}
					}
				}

				.centerBorder {
					width: 2rpx;
					height: 92rpx;
					background: #F1F1F1;
					margin: 0 60rpx;
				}
			}

			.commonFunctions-container {
				width: 100%;
				background-color: #FFFFFF;
				border-radius: 16px;
				margin-bottom: 20rpx;

				.card-title {
					width: 100%;
					padding: 0 28rpx;
					font-size: 30rpx;
					font-weight: bold;
					margin: 30rpx 0;
					color: #333333;
				}

				.function-list {
					width: 100%;
					flex-wrap: wrap;

					.function-items {
						width: 25%;
						margin-bottom: 30rpx;

						.iconbox {
							width: 60rpx;
							height: 60rpx;
						}

						.itemName {
							margin-top: 20rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}
		}
	}
</style>
